<template>
  <div class="custom-profile" >
    <el-table
      :data="customData"
      :showHeader="showHeader"
      :border=false
      :max-height="tabHeight"
      style="width: 97%">
      <el-table-column
        prop="text"
        width="180">
      </el-table-column>
      <el-table-column
        :formatter="formateCustomFromVal"
        prop="value">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import { Table, TableColumn } from 'element-ui'
  import commonFilter from '../common/customs'

  export default {
    props: {
      tabHeight: {
        type: String | Number,
        default: 300
      }
    },
    methods: {
      initCustom (id) {
        this.getCustom({ id: id }).then((response) => {
          if (response.data.errcode === 0) {
            this.customDetail = response.data.results
            this.customData = this.formateCustom(this.customDetail)
          }
          this.loading = false
        }).catch((err) => {
          console.log(err)
          this.loading = false
        })
      },
      ...commonFilter,
      ...mapActions({
        getCustom: 'getCustom'
      })
    },
    components: {
      [Table.name]: Table,
      [TableColumn.name]: TableColumn
    },
    computed: {
      ...mapState({
        dataDictionary: state => state.custom.data_dictionary
      })
    },
    watch: {
      dataDictionary (val) {
      },
      loading (val) {
        this.$emit('changeLoading', val)
      }
    },
    mounted () {
      this.initCustom(this.$route.params.id)
    },
    data () {
      return {
        showHeader: false,
        loading: true,
        customData: [],
        customDetail: {}
      }
    }
  }
</script>
